<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Document</title>
		<style>
			*{margin:0;padding:0;}
			body{background:#000;}
			#canvas{
				margin:auto;
			}
		</style>
    </head>

	<body>
		 <canvas id="canvas">
			请你更新你的浏览器
		 </canvas>
		 <script>
			var can = document.getElementById('canvas');//取到画布
			var cxt = can.getContext('2d');//绘图环境 绘圆 矩形 线。
			//雪花数量
			var W = window.innerWidth-17;//获取窗口宽度
			var H = window.innerHeight;//获取窗口高度
			window.onresize=function(){
				W = window.innerWidth-17;
				H = window.innerHeight;
				can.width = W;
				can.height = H;
			}
			can.width = W;
			can.height = H;
			var snumber = 100;
			//雪花坐标     已经存起来
			var arr = [];
			for(var i=0;i<snumber;i++){
				arr.push({
					x:Math.random()*W,//画布范围内X坐标随机出现
					y:Math.random()*H,//画布范围内Y坐标随机出现
					r:Math.random()*2+2,//随机半径坐标
				})
			}
			//如何画
			function drawnow(){
				cxt.shadowColor="white";
				cxt.shadowOffsetX=0;
				cxt.shadowOffsetY=3;
				cxt.shadowBlur=15;
				//清除画布
				cxt.clearRect(0,0,W,H)
				cxt.beginPath();
				cxt.fillStyle = "white"
				for(var i=0;i<snumber;i++){
					cxt.moveTo(arr[i].x,arr[i].y);
					// cxt.arc(arr[i].x,arr[i].y,arr[i].r,0,360,false);
					cxt.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI,true);
				}
				cxt.fill();
				snowdown()
			}
			
			//雪花如何运动

			function snowdown(){
				for(var i =0;i<snumber;i++){
                    arr[i].y += Math.random();
					if(arr[i].y>H){
                        arr[i].y = 0;
                        arr[i].x = Math.random()*W;
					}
					if(i>80){
                        arr[i].x+=Math.random()*0.5;
						if(arr[i].x>W){
                            arr[i].x=0;
						}
					}
					else if(i<60){
                        arr[i].x+=Math.random()*0.5-0.5;
						if(arr[i].x<0){
                            arr[i].x=W;
						}
					}
				}
			}
			timer=setInterval(drawnow,5);
			//美化雪花
		 </script>
	</body>
</html>

